<template>
  <div class="dashboard-container">
    <el-container>
      <el-aside width="200px" class="sidebar">
        <el-menu
          :default-active="$route.path"
          class="sidebar-menu"
          :unique-opened="true"
          :collapse="false"
        >
          <el-menu-item index="/merchant">
            <el-icon><House /></el-icon>
            <span>{{ t('merchant.dashboard') }}</span>
          </el-menu-item>
          <el-menu-item index="/merchant/products">
            <el-icon><Goods /></el-icon>
            <span>{{ t('merchant.products') }}</span>
          </el-menu-item>
          <el-menu-item index="/merchant/codes">
            <el-icon><Tickets /></el-icon>
            <span>{{ t('merchant.codes') }}</span>
          </el-menu-item>
          <el-menu-item index="/merchant/orders">
            <el-icon><List /></el-icon>
            <span>{{ t('common.orders') }}</span>
          </el-menu-item>
          <el-menu-item index="/merchant/delivery">
            <el-icon><Van /></el-icon>
            <span>{{ t('merchant.delivery') }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-main class="main-content">
        <h2>{{ t('merchant.dashboard') }}</h2>
        
        <!-- Dashboard Stats -->
        <el-row :gutter="20" class="stats-row">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <h3>{{ dashboardData.totalOrders || 0 }}</h3>
                <p>{{ t('merchant.totalOrders') }}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <h3>{{ dashboardData.currentMonthOrders || 0 }}</h3>
                <p>{{ t('merchant.thisMonth') }}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <h3>{{ dashboardData.activeProducts || 0 }}</h3>
                <p>{{ t('merchant.activeProducts') }}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-item">
                <h3>{{ deliveredOrdersCount }}</h3>
                <p>{{ t('merchant.completedOrders') }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- Order Status Breakdown -->
        <el-card class="chart-card">
          <h3>{{ t('merchant.orderStatusDistribution') }}</h3>
          <div class="status-breakdown">
            <div class="status-item">
              <span class="status-label">{{ t('merchant.pending') }}:</span>
              <el-progress :percentage="statusPercentages.pending" :color="pendingColor" />
              <span class="status-count">{{ dashboardData.orderStatusBreakdown?.pending || 0 }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">{{ t('merchant.processing') }}:</span>
              <el-progress :percentage="statusPercentages.processing" :color="processingColor" />
              <span class="status-count">{{ dashboardData.orderStatusBreakdown?.processing || 0 }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">{{ t('merchant.shipped') }}:</span>
              <el-progress :percentage="statusPercentages.shipped" :color="shippedColor" />
              <span class="status-count">{{ dashboardData.orderStatusBreakdown?.shipped || 0 }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">{{ t('merchant.delivered') }}:</span>
              <el-progress :percentage="statusPercentages.delivered" :color="deliveredColor" />
              <span class="status-count">{{ dashboardData.orderStatusBreakdown?.delivered || 0 }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">{{ t('merchant.cancelled') }}:</span>
              <el-progress :percentage="statusPercentages.cancelled" :color="cancelledColor" />
              <span class="status-count">{{ dashboardData.orderStatusBreakdown?.cancelled || 0 }}</span>
            </div>
          </div>
        </el-card>
        
        <!-- Recent Orders -->
        <el-card class="orders-card">
          <h3>{{ t('merchant.recentOrders') }}</h3>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderNumber" :label="t('merchant.orderNumber')" width="200"></el-table-column>
            <el-table-column prop="customerName" :label="t('merchant.customer')" width="150"></el-table-column>
            <el-table-column :label="t('merchant.status')">
              <template #default="scope">
                <el-tag 
                  :type="getStatusType(scope.row.orderStatus)" 
                  disable-transitions
                >
                  {{ t(`merchant.status.${scope.row.orderStatus.toLowerCase()}`) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryType" :label="t('merchant.deliveryType')" width="120"></el-table-column>
            <el-table-column prop="createdAt" :label="t('merchant.date')"></el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { 
  House, 
  Goods, 
  Tickets, 
  List, 
  Van 
} from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'MerchantDashboard',
  setup() {
    const { t } = useI18n()
    const dashboardData = ref({})
    const loading = ref(false)
    
    // Mock data for demonstration
    const mockDashboardData = {
      totalOrders: 128,
      currentMonthOrders: 32,
      activeProducts: 24,
      orderStatusBreakdown: {
        pending: 5,
        processing: 8,
        shipped: 12,
        delivered: 65,
        cancelled: 3
      }
    }
    
    const recentOrders = ref([
      {
        orderNumber: 'ORD12345678',
        customerName: 'John Doe',
        orderStatus: 'DELIVERED',
        deliveryType: 'SHIP',
        createdAt: '2023-10-15 14:30'
      },
      {
        orderNumber: 'ORD12345679',
        customerName: 'Jane Smith',
        orderStatus: 'SHIPPED',
        deliveryType: 'SHIP',
        createdAt: '2023-10-16 10:15'
      },
      {
        orderNumber: 'ORD12345680',
        customerName: 'Bob Johnson',
        orderStatus: 'PENDING',
        deliveryType: 'PICKUP',
        createdAt: '2023-10-16 16:45'
      }
    ])
    
    // Initialize with mock data
    onMounted(() => {
      dashboardData.value = mockDashboardData
    })
    
    const statusPercentages = computed(() => {
      const breakdown = dashboardData.value.orderStatusBreakdown || {}
      const total = Object.values(breakdown).reduce((sum, count) => sum + count, 0)
      
      if (total === 0) {
        return {
          pending: 0,
          processing: 0,
          shipped: 0,
          delivered: 0,
          cancelled: 0
        }
      }
      
      return {
        pending: Math.round((breakdown.pending || 0) / total * 100),
        processing: Math.round((breakdown.processing || 0) / total * 100),
        shipped: Math.round((breakdown.shipped || 0) / total * 100),
        delivered: Math.round((breakdown.delivered || 0) / total * 100),
        cancelled: Math.round((breakdown.cancelled || 0) / total * 100)
      }
    })
    
    const deliveredOrdersCount = computed(() => {
      return dashboardData.value.orderStatusBreakdown?.delivered || 0
    })
    
    const pendingColor = '#E6A23C'
    const processingColor = '#409EFF'
    const shippedColor = '#F56C6C'
    const deliveredColor = '#67C23A'
    const cancelledColor = '#909399'
    
    const getStatusType = (status) => {
      switch (status) {
        case 'PENDING': return 'warning'
        case 'PROCESSING': return 'primary'
        case 'SHIPPED': return 'danger'
        case 'DELIVERED': return 'success'
        case 'CANCELLED': return 'info'
        default: return 'info'
      }
    }
    
    return {
      t,
      dashboardData,
      loading,
      recentOrders,
      statusPercentages,
      deliveredOrdersCount,
      pendingColor,
      processingColor,
      shippedColor,
      deliveredColor,
      cancelledColor,
      getStatusType,
      House,
      Goods,
      Tickets,
      List,
      Van
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
}

.sidebar {
  background-color: #545c64;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.sidebar-menu {
  border: none;
}

.main-content {
  margin-left: 200px;
  padding: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item h3 {
  margin: 0 0 5px 0;
  font-size: 24px;
  color: #409EFF;
}

.stat-item p {
  margin: 0;
  color: #909399;
}

.chart-card {
  margin-bottom: 20px;
}

.status-breakdown {
  margin-top: 15px;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.status-label {
  width: 100px;
  margin-right: 10px;
}

.status-count {
  margin-left: 10px;
  min-width: 30px;
  text-align: right;
  color: #606266;
}

.orders-card {
  margin-top: 20px;
}
</style>